<template>
    <view>
        <view class="time_contain">
            <view class="section">
                <text>营业开关</text>
                <view class="body-view">
                    <switch :checked="isOpen" @change="switch1Change" color="#1890FF" />
                </view>
            </view>
        </view>
        <view class="time_contain">
            <view class="section">
                <view class="section_title">营业时间</view>
                <view class="section_content">
                    <picker mode="multiSelector" :range="timeArray" :value="timeIndex" @change="bindStartTimeChange">
                        <view class="picker">{{ starttime }}</view>
                    </picker>
                    <image :src="shopimgUrl + 'jian.png'"></image>
                    <picker mode="multiSelector" :range="timeArray" :value="timeIndex" @change="bindEndTimeChange">
                        <view class="picker">{{ endtime }}</view>
                    </picker>
                    <image :src="shopimgUrl + 'clock1.png'"></image>
                </view>
            </view>
        </view>
        <view class="time_contain">
            <view class="section">
                <text>营业周期</text>
            </view>
            <view class="section_cycle">
                <block v-for="(item, index) in workdays" :key="index">
                    <view :data-item="item.id" :class="item.checked == true ? 'section_cycle_checked' : 'section_cycle_nochecked'" @tap="onWorkTap">{{ item.val }}</view>
                </block>
            </view>
        </view>
        <view class="addbtn" @tap="onAdd">保存</view>
    </view>
</template>

<script>
//获取应用实例
var app = getApp();

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            shopimgUrl: app.globalData.shopimgUrl,
            id: '',
            isOpen: false,
            starttime: '',
            endtime: '',
            workday: '',
            timeArray: [
                ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
                ['00', '30']
            ],
            timeIndex: [0, 0],
            workdays: [
                {
                    id: 1,
                    val: '周一',
                    checked: false
                },
                {
                    id: 2,
                    val: '周二',
                    checked: false
                },
                {
                    id: 3,
                    val: '周三',
                    checked: false
                },
                {
                    id: 4,
                    val: '周四',
                    checked: false
                },
                {
                    id: 5,
                    val: '周五',
                    checked: false
                },
                {
                    id: 6,
                    val: '周六',
                    checked: false
                },
                {
                    id: 7,
                    val: '周日',
                    checked: false
                }
            ]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.getStoreSettingByStoreId();
    },
    methods: {
        // 获取店铺时间信息
        getStoreSettingByStoreId: function () {
            let storeId = uni.getStorageSync('storeId');

            _request
                .get('/storeSetting/getStoreSettingByStoreId', {
                    storeId: storeId
                })
                .then((res) => {
                    this.setData({
                        isOpen: res.data.data.open == 0 ? false : true,
                        starttime: res.data.data.starttime.substring(0, 5),
                        endtime: res.data.data.endtime.substring(0, 5),
                        workday: res.data.data.workday,
                        id: res.data.data.id
                    });
                    let workdayArr = this.workday.split(',');
                    let workdays = this.workdays;

                    for (let i = 0; i < workdayArr.length; i++) {
                        for (let j = 0; j < workdays.length; j++) {
                            if (workdayArr[i] == workdays[j]['id']) {
                                workdays[j]['checked'] = true;
                            }
                        }
                    }

                    this.setData({
                        workdays: workdays
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        //选择开始时间
        bindStartTimeChange: function (e) {
            let num1 = this.timeArray[0][e.detail.value[0]];
            let num2 = this.timeArray[1][e.detail.value[1]];
            this.setData({
                starttime: num1 + ':' + num2
            });
            this.dataChange();
        },

        //选择结束时间
        bindEndTimeChange: function (e) {
            let num1 = this.timeArray[0][e.detail.value[0]];
            let num2 = this.timeArray[1][e.detail.value[1]];
            this.setData({
                endtime: num1 + ':' + num2
            });
            this.dataChange();
        },

        switch1Change: function (e) {
            let that = this;

            if (this.isOpen) {
                uni.showModal({
                    title: '提示',
                    content: '关闭营业开关后，门店将不再接受新的订单，有未完成核销的订单的话请及时处理！',

                    success(res) {
                        if (res.confirm) {
                            that.setData({
                                isOpen: false
                            });
                        } else if (res.cancel) {
                            that.setData({
                                isOpen: true
                            });
                        }
                    }
                });
            } else {
                that.setData({
                    isOpen: e.detail.value
                });
            }

            this.dataChange();
        },

        onWorkTap: function (e) {
            let id = e.currentTarget.dataset.item;
            let workdays = this.workdays;

            for (let j = 0; j < workdays.length; j++) {
                if (id == workdays[j]['id']) {
                    if (workdays[j]['checked']) {
                        workdays[j]['checked'] = false;
                    } else {
                        workdays[j]['checked'] = true;
                    }
                }
            }

            this.setData({
                workdays: workdays
            });
            this.dataChange();
        },

        onAdd: function (e) {
            let storeId = uni.getStorageSync('storeId');
            let workday = '';
            let workdays = this.workdays;

            for (let j = 0; j < workdays.length; j++) {
                if (workdays[j]['checked']) {
                    workday = workday + workdays[j]['id'] + ',';
                }
            }

            if (this.starttime >= this.endtime) {
                uni.showToast({
                    title: '营业时间有误',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            workday = workday.substring(0, workday.length - 1);
            let open = this.isOpen ? 1 : 0;

            _request
                .postObj('/storeSetting/updateOrSave', {
                    workday: workday,
                    endtime: this.endtime,
                    id: this.id,
                    starttime: this.starttime,
                    storeId: storeId,
                    open: open
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        if (res.data.data.remark != null) {
                            uni.showModal({
                                title: '提示',
                                showCancel: false,
                                confirmText: '我知道了',
                                content: res.data.data.remark,

                                success(res) {
                                    if (res.confirm) {
                                        uni.disableAlertBeforeUnload();
                                        uni.showToast({
                                            title: '保存成功',
                                            icon: 'success',
                                            duration: 2000
                                        });
                                        uni.switchTab({
                                            url: '/firstpages/home/index'
                                        });
                                    } else if (res.cancel) {
                                    }
                                }
                            });
                        } else {
                            uni.disableAlertBeforeUnload();
                            uni.showToast({
                                title: '保存成功',
                                icon: 'success',
                                duration: 2000
                            });
                            uni.switchTab({
                                url: '/firstpages/home/index'
                            });
                        }
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        dataChange() {
            uni.enableAlertBeforeUnload({
                message: '内容未保存, 请确认是否返回?'
            });
        }
    }
};
</script>
<style>
.time_contain {
    display: flex;
    flex-direction: column;
    margin: 30rpx;
    border-radius: 10rpx;
    background-color: #fff;
}

.section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx;
}

.section_content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border: 1px #ccc solid;
    padding: 5rpx 10rpx;
}

.section_content image {
    width: 40rpx;
    height: 40rpx;
    margin: 10rpx;
}

.section_cycle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 35rpx 35rpx 35rpx;
}

.section_cycle_nochecked {
    display: flex;
    flex-direction: row;
    width: 100rpx;
    height: 48rpx;
    font-size: 28rpx;
    color: #999999;
    border: 1px #ccc solid;
    border-radius: 10rpx;
    margin: 10rpx;
    justify-content: center;
    align-items: center;
}

.section_cycle_checked {
    display: flex;
    flex-direction: row;
    width: 100rpx;
    height: 48rpx;
    font-size: 28rpx;
    color: #ffffff;
    border-radius: 10rpx;
    margin: 10rpx;
    justify-content: center;
    align-items: center;
    background-color: #ff8722;
}

.rest {
    font-size: 23rpx;
    color: #777;
}

.cycle {
    font-size: 28rpx;
    color: #fff;
}

.picker {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 80rpx;
    font-size: 32rpx;
    color: #666;
    padding: 5rpx;
    margin: 10rpx;
}

.to {
    font-size: 25rpx;
    color: #555;
    margin: 10rpx;
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid #666;
    margin: 8rpx;
}

.addbtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 300rpx 30rpx 0 30rpx;
    position: absolute;
    bottom: 50rpx;
}

page {
    background-color: #fbfbfb;
}
</style>
